<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ionic v4 + Vue.js - Ionic Controllers</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
        <script src="https://unpkg.com/vue-property-decorator@latest/lib/vue-property-decorator.umd.js"></script>
        <script src="https://unpkg.com/@modus/ionic-vue@latest/dist/ionic-vue.js"></script>
        <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css"/>
    </head>

    <body>
        <ion-app>
            <ion-menu side="end">
                <ion-header>
                    <ion-toolbar>
                        <ion-title>Hola</ion-title>
                    </ion-toolbar>
                </ion-header>

                <ion-content padding>
                    hola macho
                </ion-content>
            </ion-menu>

            <ion-vue-router></ion-vue-router>
        </ion-app>

        <script>
            const Toolbar = Vue.component('Toolbar', {
                name: 'Toolbar',
                props: { title: String, backURL: String },
                template: `<ion-header>
                    <ion-toolbar>
                        <ion-buttons slot="start">
                            <ion-back-button :default-href="backURL"/>
                        </ion-buttons>
                        <ion-title>{{ title }}</ion-title>
                    </ion-toolbar>
                </ion-header>`
            })

            const Home = {
                template: `<ion-page class="ion-page" main>
                    <toolbar title="Home"/>
                    <ion-content class="ion-content" padding>
                        <ion-button @click="alert">Trigger Alert</ion-button>
                        <ion-button @click="loading">Trigger Loading</ion-button>
                        <ion-button @click="menu">Toggle Menu</ion-button>
                        <ion-button @click="modal">Open Modal</ion-button>
                        <ion-button @click="popover">Open Popover</ion-button>
                        <ion-button @click="toast">Trigger Toast</ion-button>
                    </ion-content>
                </ion-page>`,
                methods: {
                    alert() {
                        this.$ionic.alertController.create({
                            header: 'Hello!',
                            message: 'How are you?',
                            buttons: ['OK, thanks!'],
                        })
                        .then(a => a.present())
                    },
                    loading() {
                        this.$ionic.loadingController.create()
                        .then(l => {
                            l.present()
                            setTimeout(function() {
                                l.dismiss()
                            }, 1000)
                        })
                    },
                    menu() {
                        this.$ionic.menuController.toggle()
                    },
                    modal() {
                        this.$ionic.modalController.create({
                            component: {
                                template: `<div>
                                    <ion-content padding>
                                        <h1>Howdy!</h1>
                                    </ion-content>
                                </div>`,
                            }
                        })
                        .then(m => m.present())
                    },
                    popover(event) {
                        this.$ionic.popoverController.create({
                            component: {
                                template: `<ion-list>
                                    <ion-list-header>
                                        <ion-label>Ionic</ion-label>
                                    </ion-list-header>
                                    <ion-item>Learn Ionic</ion-item>
                                    <ion-item>Documentation</ion-item>
                                    <ion-item>Showcase</ion-item>
                                    <ion-item>GitHub Repo</ion-item>
                                </ion-list>`,
                            },
                            translucent: true,
                            event
                        })
                        .then(p => p.present())
                    },
                    toast() {
                        this.$ionic.toastController.create({
                            message: 'Here\'s to IonicVue!',
                            buttons: ['Done'],
                            position: 'top',
                        })
                        .then(t => t.present())
                    },
                }
            }

            Vue.use(IonicVue.IonicAPI)

            new Vue({
                router: new IonicVue.IonicVueRouter({
                    routes: [
                        { path: '/', component: Home },
                    ],
                }),
            }).$mount('ion-app')
        </script>
    </body>
</html>
